<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="../js/vue.js"></script>
  <style>
      .grid {
          margin: 100px auto;
          width: 1000px;
          text-align: center;
          border: 1px solid red;
      }

      .grid table {
          border: 1px solid blue;
          width: 100%;
          border-collapse: collapse;

      }

      .grid th {
          background-color: orange;

      }

      .grid th,td {
          border: 1px solid green;
          height: 35px;
          line-height: 35px;

      }

      .grid .dept_input {
          border: 1px solid blue;
          margin-bottom: 5px;
          padding-top: 15px;
          background-color: pink;
      }

  </style>
</head>
<body>

<div id="div1">
    <div class="grid">
        <h2>部门管理</h2>
        <div class="dept_input">
            <div>
           编号
                <input type="text" v-model="id">
            名称
                <input type="text" v-model="name">
            <button @click="handle">增加</button>
            </div>
        </div>

        <table>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in departments">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>
                    <a href="">修改</a>
                    <span>|</span>
                    <a href="">删除</a>
                </td>
            </tr>
        </table>

    </div>
</div>

  <script type="text/javascript">
      const vueObj = new Vue({
          el: "#div1",
          data: {
              id: "",
              name: "",

              departments: [
                  {
                      id: 1,
                      name: "烤肉部",
                      date: "2001-01-01",
                  },
                  {
                      id: 2,
                      name: "吃饭部",
                      date: "2001-01-01",
                  },
              ]

          },
          methods: {
              handle: function (){
                  console.log("hah");
                  const dept = {};
                  dept.id = this.id;
                  dept.name = this.name;
                  dept.date = new Date();
                  this.departments.push(dept);
                  this.id = "";
                  this.name = "";

              },

          },

      });
  </script>
</body>
</html>